<script src="__PUBLIC__/js/jquery-1.11.3.min.js"></script>
<script src="__PUBLIC__/js/swiper-category-3.3.1.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/swiper-3.3.1.min.css">
<style>
.header .swiper-slide {
    padding: 0 20px;
    width: auto;
}
.header_sub .swiper-slide {
    padding: 0 20px;
    width: auto;
}
.header .swiper-slide-selected{
	color:red
}
.header {
    /*position: absolute;*/
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 43px;
    overflow: hidden;
    background: #fdfdfc;
    font: 12px/40px hiragino sans gb, microsoft yahei, simsun;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
#top-line {
    width: 100%;
    height: 3px;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    text-align: center;
    z-index: 1;
    background-color: #0fa6ea;
    background: -webkit-linear-gradient(left, rgba(15,166,234,1) 0, rgba(89,204,24,1) 10%, rgba(15,166,234,1) 60%, rgba(15,166,234,1) 100%);
    background: -moz-linear-gradient(left, rgba(15,166,234,1) 0, rgba(89,204,24,1) 10%, rgba(15,166,234,1) 60%, rgba(15,166,234,1) 100%);
    background: -ms-linear-gradient(left, rgba(15,166,234,1) 0, rgba(89,204,24,1) 10%, rgba(15,166,234,1) 60%, rgba(15,166,234,1) 100%);
    background: linear-gradient(left, rgba(15,166,234,1) 0, rgba(89,204,24,1) 10%, rgba(15,166,234,1) 60%, rgba(15,166,234,1) 100%);
}
.left_arrow{
	position: absolute;
    top: 10px;
    z-index: 1000;
    font-size: 26px;
    color: #2EBC82;
	background-image:url('/Public/img/two_left_arrow.png');
	background-size:contain;
	background-repeat:no-repeat;
	height:27px;
	width: 15px;
}
.right_arrow{
	position: absolute;
    top: 10px;
    z-index: 1000;
    font-size: 26px;
    color: #2EBC82;
	right:0px;
	background-image:url('/Public/img/two_right_arrow.png');
	background-size:contain;
	background-repeat:no-repeat;
	height:27px;
	width: 15px;
}

.left_arrow_sub{
    position: absolute;
    top: 72px;
    z-index: 1000;
    font-size: 26px;
    color: #2EBC82;
    background-image:url('/Public/img/two_left_arrow.png');
    background-size:contain;
    background-repeat:no-repeat;
    height:27px;
    width: 15px;
}
.right_arrow_sub{
    position: absolute;
    top: 72px;
    z-index: 1000;
    font-size: 26px;
    color: #2EBC82;
    right:0px;
    background-image:url('/Public/img/two_right_arrow.png');
    background-size:contain;
    background-repeat:no-repeat;
    height:27px;
    width: 15px;
}

</style>
<div id="header" class="swiper-container-horizontal swiper-container-free-mode header product_category">
    <div id="top-line"></div>
	<div class="swiper-wrapper category" id="category">

	</div>
</div>
<div class="left_arrow"></div>
<div class="right_arrow"></div>

<div id="header_sub" class="swiper-container-horizontal swiper-container-free-mode header_sub header product_category_sub" style="margin-top:15px">
    <div id="top-line"></div>
    <div class="swiper-wrapper category_sub" id="category_sub">

    </div>
</div>
<div class="left_arrow_sub"></div>
<div class="right_arrow_sub"></div>
